<template>
  <div>
    <SearchTable
      ref="st"
      :needSearchFirstShow="true"
      :formItems="formItems"
      :columns="columns"
      :api="pagelist"
      :scroll="{ x: true }"
      @formChange="formChange"
    >
      <template #actions>
        <a-button type="primary" @click="toCreate">新增</a-button>
      </template>
      <template #url="{ text, record }">
        <a-tooltip trigger="click">
          <template #title>
            <!-- <img src="https://st4-static.mingqijia.com/manage/img/logo-mqj.e41e5da.png" height="30" /> -->
            <QrCodeVue3 
              :myclass="'qrcode-'+record.id"
              :value="record.url"
              :width="200" :height="200" level="H"
              :download="false"
              :dotsOptions="{
                type: 'dot',
                color: '#000',
                gradient: {
                  type: 'radial',
                  rotation: 0,
                  colorStops: [
                    { offset: 0, color: '#000' },
                    { offset: 1, color: '#000' },
                  ],
                },
              }"
            />
          </template>
          <a-button type="link">查看</a-button>
        </a-tooltip>
        <a-divider type="vertical" />
        <a-button type="link" @click="downloadIamge(record)">下载</a-button>
      </template>
      <template #action="{ text, record }">
        <a @click="toEdit(record)">编辑</a>
        <a-divider type="vertical" />
        <a-popconfirm title="是否进行此次操作？" @confirm="confirm(record, record.status=='STATUS_OFF_SHELF'?'STATUS_PUT_SHELF':'STATUS_OFF_SHELF')">
          <a>{{record.status=='STATUS_OFF_SHELF'?'上架':'下架'}}</a>
        </a-popconfirm>
      </template>
    </SearchTable>
  </div>
</template>

<script>
  import { ref, toRefs, reactive } from 'vue';
  import { message } from 'ant-design-vue';
  import { formItems, columns } from './config';
  import { pagelist, editstatus} from './api';
  import { useRouter } from 'vue-router';
  import QrCodeVue3 from 'qrcode-vue3';

  export default {
    components: {QrCodeVue3},
    data() {
      return {
        pagelist,
        formItems,
        columns,
        sss:{"width":300,"height":300,"value":"https://qr-code-styling.com","margin":0,"qrOptions":{"typeNumber":"0","mode":"Byte","errorCorrectionLevel":"Q"},"imageOptions":{"hideBackgroundDots":true,"imageSize":0.4,"margin":0},"dotsOptions":{"type":"extra-rounded","color":"#0a0503","gradient":null},"backgroundOptions":{"color":"#ffffff"},"image":"10cc19bd484118dbcd0a7886a38ceddc.png","dotsOptionsHelper":{"colorType":{"single":true,"gradient":false},"gradient":{"linear":true,"radial":false,"color1":"#6a1a4c","color2":"#6a1a4c","rotation":"0"}},"cornersSquareOptions":{"type":"extra-rounded","color":"#000000"},"cornersSquareOptionsHelper":{"colorType":{"single":true,"gradient":false},"gradient":{"linear":true,"radial":false,"color1":"#000000","color2":"#000000","rotation":"0"}},"cornersDotOptions":{"type":"","color":"#000000"},"cornersDotOptionsHelper":{"colorType":{"single":true,"gradient":false},"gradient":{"linear":true,"radial":false,"color1":"#000000","color2":"#000000","rotation":"0"}},"backgroundOptionsHelper":{"colorType":{"single":true,"gradient":false},"gradient":{"linear":true,"radial":false,"color1":"#ffffff","color2":"#ffffff","rotation":"0"}}}
      };
    },

    setup(props, context) {
      const st = ref()
      const router = useRouter();
      function toCreate(query) {
        router.push({
          name: 'aggyxadd',
        });
      }

      function toEdit(record) {
        router.push({
          name: 'aggyxedit',
          query: {
            id: record.id,
          },
        });
      }
      const confirm = ({id}, status) => {
        const params = {
          id,
          status
        }
        editstatus(params).then(res => {
          st.value.load();
        })
      }

      const formChange = (...args) => {
        // console.log(args, 'argsargs');
      };
      const downloadIamge = (recode, name) => {
        var className = `qrcode-${recode.id}`;
        var imgsrc = document.querySelector(`.${className}`)?.getElementsByTagName('img')[0]?.src;
        if (!imgsrc) {
          message.error('请先查看二维码后再下载')
          return;
        }
        let image = new Image();
        image.setAttribute("crossOrigin", "anonymous");
        image.onload = function() {
          let canvas = document.createElement("canvas");
          canvas.width = image.width;
          canvas.height = image.height;
          let context = canvas.getContext("2d");
          context.drawImage(image, 0, 0, image.width, image.height);
          let url = canvas.toDataURL("image/gif");
          let a = document.createElement("a");
          let event = new MouseEvent("click");
          a.download = name || "qrv";
          a.href = url; 
          a.dispatchEvent(event);
        };
        image.src = imgsrc;
      }

      return {
        st,
        confirm,
        toCreate,
        toEdit,
        formChange,
        downloadIamge
      };
    },
  };
</script>
